<template>
	<div class="">
		<div class="tabs">
			<el-tabs
				v-model="activeName"
				@tab-click="handleClick"
				v-if="notEmpty(menus)">
				<el-tab-pane
					v-for="item in menus"
					:key="item.name"
					:label="item.name"
					:name="item.key"></el-tab-pane>
			</el-tabs>
		</div>
		<div v-if="notEmpty(infoData)">
			<keep-alive>
				<component
					:is="currentCom"
					v-model="infoData"
					:state="state"
					:type="type"></component>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	import Details from './details';
	import PayTable from './payTable';
	import PriceSheet from './priceSheet';
	import Profit from './profit';

	export default {
		name: 'ApplyDetails',
		components: { Details, PayTable, PriceSheet, Profit },
		props: {
			value: {
				required: false,
			},
		},
		data() {
			return {
				activeName: 'first',
				loading: true,
				menus: [
					// {
					//     name: "内部报价详情",
					//     key: "first",
					//     com: "Details",
					// },
					// {
					//     name: "租金支付表",
					//     key: "second",
					//     com: "PayTable",
					// },
					// {
					//     name: "对外报价单",
					//     key: "third",
					//     com: "PriceSheet",
					// },
					// {
					//     name: "财务利润测算",
					//     key: "fourth",
					//     com: "Profit",
					// },
				],
			};
		},
		computed: {
			infoData: {
				get() {
					return this.value;
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			calcSchemeId() {
				return this.$route.query.calcSchemeId;
			},
			id() {
				return this.$route.query.id;
			},
			state() {
				return 'readonly';
			},
			type() {
				return 'preview';
			},
			currentCom() {
				let item = this.menus?.find(e => e.key == this.activeName);
				return item?.com;
			},
		},
		created() {
			// if (this.calcSchemeId) {
			//     this.getDetails(this.calcSchemeId);
			// } else {
			//     this.initData();
			//     this.loading = false;
			// }
			this.menus.push({
				name: '内部报价详情',
				key: 'first',
				com: 'Details',
			});
			if (this.checkPermi(['quota:apply:detail:payTable'])) {
				this.menus.push({
					name: '租金支付表',
					key: 'second',
					com: 'PayTable',
				});
			}
			if (this.checkPermi(['quota:apply:detail:priceSheet'])) {
				this.menus.push({
					name: '对外报价单',
					key: 'third',
					com: 'PriceSheet',
				});
			}
			if (this.checkPermi(['quota:apply:detail:profit'])) {
				this.menus.push({
					name: '财务利润测算',
					key: 'fourth',
					com: 'Profit',
				});
			}
		},
		mounted() {},
		methods: {
			flow_submit() {
				console.log('flow_submit');
				this.$emitter.emit('setchangeState');
			},
			handleClick() {},
		},
	};
</script>

<style lang="scss" scoped>
	.tabs {
		margin: 20px;
		padding: 5px 20px 0;
		background-color: #fff;
		border-radius: 8px;
		// margin-top: 0;
	}
	.containerBox {
		min-height: calc(100vh - 220px);
		display: flex;
	}
	.content_tabs123 {
		flex: 1;
		min-width: 0;
	}
</style>
